<!-- 新增或编辑设备科u'xubg组件 -->
<template>
  <a-modal
    width="50%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title>
      {{
        type === 'main'
          ? '新建主类型'
          : type === 'child'
          ? '新建子类型'
          : '编辑类型'
      }}
    </template>
    <div>
      <a-form :model="currForm" direction="vertical" auto-label-width>
        <a-form-item
          field="demandInfo"
          label="父级类型："
          v-if="currForm.pid > 0"
        >
          <a-input allow-clear v-model="fName" disabled />
        </a-form-item>
        <a-form-item field="demandInfo" label="类型名称：">
          <a-input
            placeholder="请输入类型名称"
            allow-clear
            v-model="currForm.name"
          />
        </a-form-item>
        <a-form-item field="demandInfo" label="设备类型编号：">
          <a-input
            placeholder="请输入设备类型编号"
            allow-clear
            v-model="currForm.code"
          />
        </a-form-item>

        <a-form-item field="demandInfo" label="启用状态：">
          <a-radio-group :default-value="1" v-model="currForm.isEnable">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="2">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="decision" label="备注：">
          <a-textarea
            placeholder="请输入"
            v-model="currForm.remark"
            allow-clear
            show-word-limit
            :auto-size="{
              minRows: 5,
            }"
          />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { reactive, computed, ref, watchEffect } from 'vue';
  // import { IClientAddFollowRecord } from '@/types/order';

  const props = withDefaults(
    defineProps<{
      visible: boolean; // 是否显示对话框
      form: any; // 传进来的数据
      fatherName?: string; // 父级名称
      type: string; // main child edit 分别对应新建主类型，新建子类型和编辑类型
    }>(),
    {
      visible: false,
      type: 'main',
    }
  );

  const emit = defineEmits(['update:visible', 'addTypeEmit', 'cancelaaa']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const fName = computed(() => props.fatherName);

  let currForm = ref<any>({
    name: '',
    remark: '',
    isEnable: 1,
    code: '',
    pid: 0,
  });

  watchEffect(() => {
    if (modalVisible.value) {
      if (props.type === 'edit')
        currForm.value = cloneDeep(props.form); // 判断是修改操作的弹框
      else if (props.type === 'child') {
        // 判断是否是添加子类型
        currForm.value = props.form;
      }
    }
  });

  // 保存
  const handleOk = async () => {
    modalVisible.value = false;
    emit('addTypeEmit', currForm.value);
    currForm.value = {
      name: '',
      remark: '',
      isEnable: 1,
      code: '',
      pid: 0,
    };
  };

  // 取消
  const handleCancel = () => {
    currForm.value = {
      name: '',
      remark: '',
      isEnable: 1,
      code: '',
      pid: 0,
    };
    emit('cancelaaa');
    modalVisible.value = false;
  };
</script>

<style scoped lang="less">
  :deep(.arco-input-wrapper .arco-input[disabled]) {
    -webkit-text-fill-color: #165dff;
  }
</style>
